<template>
  <!-- 项目改价组件 -->
  <div class="editReward-box">
    <!-- 修改表单 -->
    <h3>总价修改</h3>
    <el-form ref="form" :model="form" label-width="100px" label-position="left">
        <el-form-item label="当前价格">
            <el-input v-model="form.oldAmount" disabled></el-input>
        </el-form-item>
        <el-form-item label="修改价格">
            <el-input v-model.number="form.newAmount" placeholder="请输入..." @blur="blurInput"></el-input>
        </el-form-item>
        <el-form-item label="修改原因">
            <el-input type="textarea" v-model="form.cause" resize="none" placeholder="请输入..." rows="8"></el-input>
        </el-form-item>
    </el-form>

    <!-- 改价更改记录 -->
    <h3>修改记录</h3>
    <div class="record">
        <ul>
            <li v-for="(list,index) in editData" :key="index">
                <h3>
                    <p><i></i>{{list.createName}}</p>
                    <p>{{list.createTime}}</p>
                </h3>
                <p>修改金额：{{list.newAmount/10000}}万</p>
                <p>修改原因：{{list.cause}}</p>
            </li>
        </ul>
    </div>

    <div class="addSubBtn">
        <SubBtn>
            <template slot="btn">
                <el-button round @click="reset">重置</el-button>
                <el-button round class="addBtn" @click="submit" :disabled="!isCheck">提交</el-button>
            </template>
        </SubBtn>
    </div>

  </div>
</template>

<script>
import SubBtn from "@/components/subBtn/subBtn.vue"
import { getProjectGetInfoApi,editProjectApi } from "@/wss/newApi_3-24/doc/project.js"
import debounce from "lodash/debounce";
export default {
    props:{
        orderInfo: {
            type: Object,
            default: () => {
                return {};
            },
        },
        project: {
            type: Object,
            default: () => {
                return {};
            },
        },
    },
    components:{SubBtn},
    data(){
        return{
            // 修改表单
            form:{
                cause:'',//改价原因
                createBy:'',//改价人ID
                createName:'',//改价人名字
                createType:'1',//改价人类型 1 商务 2 专家
                oldAmount: '',//原始价格
                newAmount: null,//新价格
                orderId:'',
            },

            projectData:{},//项目数据
            editData:[], // 修改记录的数据

            isCheck: true,// 判断当前点击保存是否已经返回请求
        }
    },
    mounted(){
        this.projectData = this.project //默认项目信息

        this.getProjectGetInfo() // 获取项目的信息
        this.getEditInfo() // 初始化改价信息

        // 关闭的时候通过$bus清空上一次的改价信息
        this.$bus.$on('clearEditInfo',()=>{
            this.form.cause = '' //原因
            this.form.newAmount = null//新价格
        })
    },
    watch:{
        //监控当切换的时候重新唤起项目的信息
        orderInfo(newValue,oldValue){
            this.getProjectGetInfo() // 获取项目的信息
        },

        project(newValue,oldValue){
            this.projectData = this.project
        }
    },
    methods:{
        // 初始化改价信息
        getEditInfo(){
            this.form.createBy = this.$store.state.user.userId //改价人ID
            this.form.createName = this.$store.state.user.name //改价人名字
            this.form.oldAmount = this.projectData.amount //原始价格
            this.form.orderId = this.orderInfo.id
        },

        // 获取项目的信息
        async getProjectGetInfo(){
            let result = await getProjectGetInfoApi({id:this.orderInfo.goodsId})
            if(result.code == 200){
                this.editData = result.data.priceChange // 修改记录的数据
                this.form.oldAmount  = result.data.amount
            }
        },

        // 项目修改接口
        async editProject(){
            let project = {
                id: this.orderInfo.goodsId,
                priceChange: [this.form]
            }
            let result = await editProjectApi(project)
            if(result.code == 200){
                this.$message({type: "success",message: '提交成功！',});
            }
        },

        //判断改价不能低于原价格
        blurInput(){
            if(this.form.newAmount < this.form.oldAmount){
                this.$message({type: "warning",message: '修改价格不能低于当前价格！',});
            }
        },

        // 点击重置按钮
        reset(){
            this.form.cause = '' //原因
            this.form.newAmount = null//新价格
        },

        //点击提交按钮
        submit: debounce(async function(){
            if(this.form.newAmount =='' || this.form.cause==''){
                this.$message({type: "warning",message: '修改价格或者修改原因不能为空！',});
            }else{
                if(this.form.newAmount < this.form.oldAmount){
                    this.$message({type: "warning",message: '修改价格不能低于当前价格！',});
                }else{
                    this.isCheck = false //先不给点击保存
                    await this.editProject() // 项目修改接口
                    await this.getProjectGetInfo() // 重新获取项目的信息
                    this.form.cause = '' //原因
                    this.form.newAmount = null//新价格
                    this.isCheck = true //可以点击保存了
                }
            }
        },1000),
    },
}
</script>

<style scoped>
ul,h3,h4,p{
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 修改表单 */
.editReward-box{
    padding: 0 20px;
    margin-bottom: 80px;
}
.editReward-box>h3{
    font-size: 16px;
    font-weight: 600;
    color: #2E405E;
    margin-bottom: 20px;
    margin-top: 10px;
}
.editReward-box .el-form{
    margin-bottom: 30px;
}
.editReward-box >>> .el-form-item{
    margin-bottom: 20px;
}
.editReward-box .el-form >>> .el-input--medium{
    width: 100%!important;
}
.editReward-box >>> .el-form-item__label{
    color: #2E3F5E;
}
.editReward-box >>> .el-textarea__inner{
    font-family: Microsoft Yahei;
}

/* 报酬更改记录 */
.record{
}
.record li{
    position: relative;
}
.record li>h3{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    color: #909AAA;
    margin-top: 15px;
    margin-bottom: 15px;
}
.record li::before{
    content: '';
    position: absolute;
    left: 1.5px;
    top: 10px;
    display: block;
    width: 1px;
    height: 115%;
    background-color: #EFEFEF;
}
.record li>h3 i{
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #909AAA;
    margin-right: 5px;
}
.record li>h3>p:first-child{
    display: flex;
    align-items: center;
}
.record li>h3>p:last-child{
    font-size: 12px;
    font-weight: 400;
    color: #909AAA;
}
.record li>p{
    margin-left: 10px;
    font-size: 12px;
    line-height: 22px;
    font-weight: 400;
    color: #2E3F5E;
    word-wrap: break-word;
}
.record li:last-child::before{
    display: none;
}
/* 报酬更改记录  end*/
</style>
<style scoped>
/* 底部按钮 */
::v-deep .addSubBtn .subBtn{
    padding: 10px 30px;
}
::v-deep .statusBox .addSubBtn .subBtn{
    align-items: center;
}
::v-deep .statusBox .addSubBtn .subBtn .payable{
    font-size: 14px;
    font-weight: 600;
    color: #333333;
}
::v-deep .statusBox .addSubBtn .subBtn .payable>b{
    font-size: 18px;
    color: #F87A23;
}
::v-deep .statusBox .addSubBtn .subBtn .payable>span{
    color: #999999;
    font-weight: 400;
}
</style>